{{define "404.html"}}
<!DOCTYPE html>
<html lang="zh-CN" class="h-100">
  <head>
    {{template "layouts/head.html" .}}
  </head>

  <body class="d-flex flex-column h-100">
    {{template "layouts/header.html" .}}

    <main class="flex-shrink-0 main">
      <div class="container">
        <div class="error-page">
          <div class="error-content">
            <div class="error-code">404</div>
            <h1 class="error-title">页面未找到</h1>
            <div class="error-message">
              {{if .Message}}
              <p>{{.Message}}</p>
              {{else}}
              <p>抱歉，您访问的页面不存在或已被删除。</p>
              {{end}}
            </div>
            <div class="error-actions">
              <a href="/" class="btn btn-primary">返回首页</a>
              <a href="javascript:history.back()" class="btn btn-secondary"
                >返回上页</a
              >
            </div>
          </div>

          <div class="helpful-links">
            <h3>您可能想要：</h3>
            <div class="quick-actions">
              <a href="/" class="action-card">
                <div class="action-icon">🏠</div>
                <div class="action-text">
                  <div class="action-title">浏览最新文章</div>
                  <div class="action-desc">查看所有最新发布的文章</div>
                </div>
              </a>
              <button
                class="action-card search-trigger"
                onclick="openSearchModal()"
              >
                <div class="action-icon">🔍</div>
                <div class="action-text">
                  <div class="action-title">搜索内容</div>
                  <div class="action-desc">快速找到您需要的内容</div>
                </div>
              </button>
              <a href="/about" class="action-card">
                <div class="action-icon">👤</div>
                <div class="action-text">
                  <div class="action-title">了解我们</div>
                  <div class="action-desc">查看作者介绍和联系方式</div>
                </div>
              </a>
            </div>

            {{if .Categories}}
            <div class="categories-section">
              <h4>热门分类：</h4>
              <div class="categories-list">
                {{range $category, $count := .Categories}}
                <a href="/category/{{$category}}" class="category-link">
                  {{$category}} ({{$count}})
                </a>
                {{end}}
              </div>
            </div>
            {{end}}
          </div>
        </div>
      </div>
    </main>

    {{template "layouts/footer.html" .}} {{template "layouts/js.html" .}}

    <style>
      .error-page {
        text-align: center;
        padding: 2rem 0;
        min-height: 60vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .error-content {
        margin-bottom: 3rem;
      }

      .error-code {
        font-size: 8rem;
        font-weight: 900;
        color: #e74c3c;
        line-height: 1;
        margin-bottom: 1rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
      }

      .error-title {
        font-size: 2.5rem;
        color: #2c3e50;
        margin-bottom: 1rem;
        font-weight: 600;
      }

      .error-message {
        font-size: 1.2rem;
        color: #7f8c8d;
        margin-bottom: 2rem;
        line-height: 1.6;
      }

      .error-actions {
        margin-bottom: 2rem;
      }

      .btn {
        display: inline-block;
        padding: 0.75rem 1.5rem;
        margin: 0 0.5rem;
        border-radius: 0.5rem;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
      }

      .btn-primary {
        background-color: #3498db;
        color: white;
      }

      .btn-primary:hover {
        background-color: #2980b9;
        transform: translateY(-1px);
      }

      .btn-secondary {
        background-color: #95a5a6;
        color: white;
      }

      .btn-secondary:hover {
        background-color: #7f8c8d;
        transform: translateY(-1px);
      }

      .helpful-links {
        display: inline-block;
        min-width: 300px;
        max-width: calc(100vw - 4rem);
        text-align: left;
        background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
        padding: 2rem;
        border-radius: 1.5rem;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        margin: 0 auto;
      }

      .helpful-links h3 {
        color: #2c3e50;
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
        font-weight: 600;
        text-align: center;
      }

      .helpful-links h4 {
        color: #34495e;
        margin: 2rem 0 1rem 0;
        font-size: 1.2rem;
        font-weight: 500;
      }

      .quick-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
      }

      .action-card {
        display: flex;
        align-items: center;
        padding: 1.5rem;
        background: white;
        border-radius: 1rem;
        text-decoration: none;
        color: inherit;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        border: 1px solid #e9ecef;
        cursor: pointer;
      }

      .action-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        text-decoration: none;
        color: inherit;
      }

      .search-trigger {
        border: none;
        background: white;
        width: 100%;
        text-align: left;
        font-family: inherit;
        font-size: inherit;
      }

      .action-icon {
        font-size: 2rem;
        margin-right: 1rem;
        min-width: 60px;
        text-align: center;
      }

      .action-text {
        flex: 1;
      }

      .action-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 0.3rem;
      }

      .action-desc {
        font-size: 0.9rem;
        color: #7f8c8d;
        line-height: 1.4;
      }

      /* 桌面端自适应布局 */
      @media (min-width: 1025px) {
        .action-card {
          min-height: 80px;
        }

        .action-text {
          min-width: 0;
          flex: 1;
        }

        .quick-actions {
          gap: 1.5rem;
        }

        .action-desc {
          word-wrap: break-word;
          hyphens: auto;
        }
      }

      .categories-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .category-link {
        background: #ecf0f1;
        padding: 0.3rem 0.8rem;
        border-radius: 1rem;
        font-size: 0.9rem;
        color: #2c3e50 !important;
        text-decoration: none;
        transition: background-color 0.3s ease;
      }

      .category-link:hover {
        background: #bdc3c7;
        text-decoration: none !important;
      }

      @media (max-width: 1024px) and (min-width: 769px) {
        .quick-actions {
          grid-template-columns: repeat(2, 1fr);
          gap: 1rem;
        }

        .action-card {
          padding: 1.2rem;
        }

        .action-icon {
          font-size: 1.8rem;
        }

        .helpful-links {
          margin: 0 1rem;
          padding: 1.5rem;
          max-width: calc(100vw - 2rem);
        }
      }

      @media (max-width: 768px) {
        .error-page {
          padding: 1rem 0;
          min-height: auto;
        }

        .error-content {
          margin-bottom: 1.5rem;
        }

        .error-code {
          font-size: 4rem;
          margin-bottom: 0.5rem;
        }

        .error-title {
          font-size: 1.5rem;
          margin-bottom: 0.5rem;
        }

        .error-message {
          font-size: 0.9rem;
          margin-bottom: 1rem;
        }

        .error-actions {
          margin-bottom: 1rem;
        }

        .helpful-links {
          display: block;
          margin: 0 0.5rem;
          padding: 1rem;
          width: calc(100% - 1rem);
          max-width: none;
          min-width: auto;
          border-radius: 1rem;
        }

        .helpful-links h3 {
          font-size: 1.2rem;
          margin-bottom: 1rem;
        }

        .helpful-links h4 {
          font-size: 1rem;
          margin: 1rem 0 0.5rem 0;
        }

        .quick-actions {
          grid-template-columns: 1fr;
          gap: 0.75rem;
          margin-bottom: 1rem;
        }

        .btn {
          display: inline-block;
          padding: 0.5rem 1rem;
          margin: 0.25rem 0.25rem;
          font-size: 0.85rem;
          min-width: auto;
        }

        .action-card {
          padding: 0.75rem;
          flex-direction: column;
          text-align: center;
          min-height: auto;
        }

        .action-icon {
          font-size: 1.8rem;
          margin-right: 0;
          margin-bottom: 0.5rem;
          min-width: auto;
        }

        .action-text {
          text-align: center;
        }

        .action-title {
          font-size: 0.95rem;
          margin-bottom: 0.2rem;
        }

        .action-desc {
          font-size: 0.8rem;
          line-height: 1.3;
        }

        .categories-list {
          gap: 0.25rem;
        }

        .category-link {
          font-size: 0.75rem;
          padding: 0.15rem 0.5rem;
        }
      }

      @media (max-width: 480px) {
        .helpful-links {
          display: block;
          margin: 0 0.25rem;
          padding: 0.75rem;
          width: calc(100% - 0.5rem);
          min-width: auto;
        }

        .error-page {
          padding: 0.5rem 0;
        }

        .action-card {
          padding: 0.5rem;
        }

        .action-icon {
          font-size: 1.5rem;
          margin-bottom: 0.3rem;
        }

        .action-title {
          font-size: 0.9rem;
        }

        .action-desc {
          font-size: 0.75rem;
        }
      }
    </style>

    <script>
      // 调用搜索弹窗的函数
      function openSearchModal() {
        // 检查搜索管理器是否存在
        if (window.searchManager && window.searchManager.openModal) {
          window.searchManager.openModal();
        } else {
          // 如果搜索管理器还未初始化，直接触发搜索按钮点击
          const searchToggle = document.getElementById("search-toggle");
          if (searchToggle) {
            searchToggle.click();
          }
        }
      }
    </script>
  </body>
</html>
{{end}}
